<template>
  <div class="container">
    <el-dialog
      title="商品搜索"
      :visible.sync="commoditydialog.centerDialogVisible"
      width="700px"
      center
      :lock-scroll="true"
    >
      <div class="top">
        <el-select v-model="search.select" @change="clickSeelct">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-input style="width:200px;margin:0 10px" v-model="search.value" placeholder="请输入内容"></el-input>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-search"
          class="handleSearch"
          @click="handleSearch()"
        >查询</el-button>
      </div>
      <div class="tagList">
        <el-tag v-for="tag in tags" :key="tag.name" closable @close="handleClose(tag)">{{tag.name}}</el-tag>
      </div>
      <el-table
        :data="formData"
        max-height="450px"
        border
        style="width: 100%;margin-top:10px"
        ref="multipleTable"
        empty-text="暂无数据"
      >
        <el-table-column prop="code" label="商品编码" align="center"></el-table-column>
        <el-table-column prop="name" label="商品名称" align="center"></el-table-column>
        <el-table-column prop="unit" label="单位" align="center"></el-table-column>
        <el-table-column label="操作" width="100" align="center">
          <template slot-scope="scope">
            <el-button
              class="add"
              size="small"
              type="primary"
              icon="el-icon-circle-plus"
              @click="add(scope)"
            >添加</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { erpCommodityList } from "@/api/commodity/commodityList";

export default {
  props: {
    commoditydialog: Object
  },
  data() {
    return {
      formData: null,
      options: [
        {
          value: "",
          label: "商品编码"
        },
        {
          value: "1",
          label: " 商品名称"
        }
      ],
      search: {
        select: "",
        value: ""
      },
      tags: []
    };
  },
  methods: {
    handleSearch() {
      this.formData = [];
      this.getData();
    },

    getData() {
      this.formData = [];
      let data = {
        search: this.search.value,
        limit: 1000
      };
      erpCommodityList(data).then(res => {
        if (res.code == 0) {
          this.formData = res.data.data;
        }
      });
    },
    clickSeelct() {
      this.search.value = "";
    },
    //确定
    confirm() {
      this.$emit("tag", this.tags);
      this.cancel();
    },
    //取消
    cancel() {
      this.search.value = "";
      this.formData = [];
      this.commoditydialog.centerDialogVisible = false;
      this.tags = [];
    },
    //添加
    add(scope) {
      let arr = this.tags.filter((res) => {
        return res.code == scope.row.code;
      });
      if (arr.length > 0) {
         this.$message({
            type: "info",
            message: "该商品已添加"
          });
      } else {
        this.tags.push({
         name: scope.row.name,
          code: scope.row.code
        });
      }
    },
    //删除
    handleClose(tag) {
      this.tags.splice(this.tags.indexOf(tag), 1);
    },
    //选取
    // handleSelectionChange(data) {
    //   this.tags = [];
    //   data.forEach(res => {
    //     this.tags.push({
    //       name: res.name,
    //       code: res.code,
    //       id: res.id
    //     });
    //   });
    // }
  }
};
</script>
<style scoped>
.top {
  display: flex;
  /* justify-content: center; */
}
.tagList {
  margin-top: 10px;
}
.el-tag {
  margin-right: 5px;
  margin-top: 2px;
}
</style>